<template>
    <div class="orderDetail">
        <el-dialog :close-on-click-modal="false" title="订单详情" :visible.sync="showDialog" @close="$emit('update:showDetails', false)"
                   :showDetails="showDetails" width="500px">
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple-dark">充值方式：</div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">{{ DetailInfo.pay_type}}</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple-dark">收款方式:</div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">{{DetailInfo.pay_method}}</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple-dark">充值金额：</div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">{{ DetailInfo.recharge_amount}}</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple-dark">实付金额:</div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">{{DetailInfo.real_amount}}</div>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row>
                <el-col :span="24">收款银行卡</el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple-dark">卡号:</div>
                </el-col>
                <el-col :span="20">
                    <div class="grid-content bg-purple-dark">{{DetailInfo && DetailInfo.receipt_ext_obj? DetailInfo.receipt_ext_obj.bank_code:''}}</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple-dark">开户行:</div>
                </el-col>
                <el-col :span="20">
                    <div class="grid-content bg-purple-dark">{{DetailInfo && DetailInfo.receipt_ext_obj? DetailInfo.receipt_ext_obj.bank_branch:''}}</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple-dark">姓名:</div>
                </el-col>
                <el-col :span="20">
                    <div class="grid-content bg-purple-dark">{{DetailInfo.receipt_ext_obj.first_name != null && DetailInfo.receipt_ext_obj.last_name != null?DetailInfo.receipt_ext_obj.first_name + DetailInfo.receipt_ext_obj.last_name:''}}</div>
                </el-col>

            </el-row>
        </el-dialog>
    </div>
</template>

<script>
    import {getOrderInfoByID} from "@/api/index";

    export default {
        data() {
            return {
                setbank: false,
                showDialog: this.showDetails,
                loading: false,
                DetailInfo: {}
            }
        },
        props: {
            showDetails: {
                type: Boolean,
                default: false
            },
            id: {
                type: Number
            },
            AgencyType: {
                type: Object
            },
            settleCycle: {
                type: Object
            },
            MerchantsList: {
                type: Array
            },
        },
        created() {
            this.getOrderInfoByID()
        },
        methods: {
            getOrderInfoByID() {
                getOrderInfoByID(this.id).then(res => {
                    if (res.status === 0) {
                        this.DetailInfo = res.data
                        this.DetailInfo.pay_type =this.$store.state.app.RecepiptMethodType[this.DetailInfo.receipt_type]
                        this.DetailInfo.receipt_ext_obj = JSON.parse(res.data.receipt_ext)
                        this.DetailInfo.pay_method = this.$store.state.app.PayMethodType[this.DetailInfo.receipt_method]
                    }
                }).catch()
            }
        },
        watch: {
            showDetails() {
                this.showDialog = this.showDetails
            }
        }
    }
</script>

<style scoped lang="scss">
.orderDetail{
    .el-col{
        margin: 10px 0 10px 0 ;
    }
}
</style>